<template>
  <div>
    <!-- 头部导航 -->
    <div>
      <van-nav-bar fixed>
        <template v-slot:left>
          <img src="@/assets/toutiao.png" alt="" class="logo" />
          <div>每日头条</div>
        </template>
        <template #right>
          <!-- postcss只能翻译style里的css样式代码，标签内样式他无法转换px到rem 自己手动计算 -->
          <van-icon name="search" size="0.48rem" color="#fff" @click="moveSearchPageFn" />
        </template>
      </van-nav-bar>
    </div>
    <!-- tab栏导航 -->
    <div class="main">
      <van-tabs
        v-model="channelId"
        @change="channelChangeFn"
        animated
        sticky
        offset-top="1.226667rem"
      >
        <van-tab
          v-for="obj in userChannelList"
          :key="obj.id"
          :title="obj.name"
          :name="obj.id"
          ><ArticleList :channelId="channelId"></ArticleList
        ></van-tab>
      </van-tabs>
      <!-- 编辑频道图标 -->
      <van-icon name="plus" size="0.37333334rem" class="moreChannels" @click="plusClickFn"/>
    </div>
    <!-- 频道管理弹出层 -->
    <van-popup v-model="show" class="channel_popup" get-container="body">
      <ChannelEdit
      :userList="userChannelList"
      :unCheckList="unCheckChannelList"
      @addChannelEV="addChannelFn"
      @removeChannelEV="removeChannelFn"
      @closeEV="closeFn"
      ref="editRef"
      v-model="channelId"
      ></ChannelEdit></van-popup>
  </div>
</template>

<script>
import { getUserChannelsAPI, getAllChannelsAPI, updateChannelsAPI, removeTheChannelAPI } from '@/api'
import ArticleList from './component/ArticleList.vue'
import ChannelEdit from './ChannelEdit'
export default {
  name: 'homeIndex',
  data () {
    return {
      channelId: this.channelId, // 激活时的频道id
      userChannelList: [], // 用户选择的频道列表
      allChannelList: [], // 所有频道列表
      // articleList: [] // 文章列表
      show: false, // 频道弹出层显示/隐藏
      channelScrollTObj: {}// 保存每个频道滚动位置
    }
  },
  async created () {
    // 频道列表
    const res = await getUserChannelsAPI()
    console.log(res)
    this.userChannelList = res.data.data.channels
    // 文章列表
    // const res2 = await getAllArticleListAPI({
    //   channel_id: 0, // 先默认请求推荐默认的频道数据
    //   timestamp: (new Date()).getTime()
    // })
    // console.log(res2)
    // this.articleList = res2.data.data.results
    // this.channelChangeFn()

    // 所有频道列表
    const res2 = await getAllChannelsAPI()
    console.log(res2)
    this.allChannelList = res2.data.data.channels
  },
  components: { ArticleList, ChannelEdit },
  methods: {
    // tabs切换的事件 -> 获取文章列表数据
    async channelChangeFn () {
      // 文章列表
      //   const res2 = await getAllArticleListAPI({
      //     channel_id: 0, // 先默认请求推荐默认的频道数据
      //     timestamp: (new Date()).getTime()
      //   })
      //   console.log(res2)
      //   this.articleList = res2.data.data.results
      // }

      // tab切换后设置滚动条的位置
      // tab 切走后，组件内部会把切走的容器高度设置为0，滚动条因为没有高度回到了顶部
      this.$nextTick(() => {
        document.documentElement.scrollTop = this.channelScrollTObj[this.channelId]
        document.body.scrollTop = this.channelScrollTObj[this.channelId]
      })
    },
    // 加号的点击事件
    plusClickFn () {
      this.show = true
    },
    // 添加频道
    async addChannelFn (channelObj) {
      this.userChannelList.push(channelObj)
      // 把最新数组传给后台
      // const newArr = this.userChannelList.filter(obj => obj.id !== 0)
      // this.userChannelList.forEach((obj, index) => {
      //   delete obj.name
      //   obj.seq = index
      // })
      // const res = await updateChannelsAPI({
      //   channel: newArr
      // })
      // console.log(res)

      // 上面代码出了问题，新增时，名字被删除了
      // 原因： 所有数组里的对象，都是同一个内存地址，影响到ChannelEdit
      const newArr = this.userChannelList.filter(obj => obj.id !== 0)
      const theNewArr = newArr.map((obj, index) => {
        const newObj = { ...obj }// 浅拷贝
        delete newObj.name
        newObj.seq = index
        return newObj // 让map 方法把新对象收集起来形成一个新的数组
      })
      const res = await updateChannelsAPI({
        channels: theNewArr
      })
      console.log(res)
    },
    // 删除频道
    async removeChannelFn (channelObj) {
      const index = this.userChannelList.findIndex(obj => obj.id === channelObj.id)
      this.userChannelList.splice(index, 1)
      // 1.方式1把现在用户数组的数据再覆盖式发给后台
      // 2.方式二只调用删除的接口
      const res = await removeTheChannelAPI({
        channelId: channelObj.id
      })
      console.log(res)
      // 删除接口返回状态码204（no content）
    },
    // 关闭弹出层
    closeFn () {
      this.show = false
      this.$refs.editRef.isEdit = false
    },
    // 跳转搜索页面
    moveSearchPageFn () {
      this.$router.push('/search')
    },
    // 监听网页滚动事件
    scrollFn () {
      this.$route.meta.scrollT = document.documentElement.scrollTop || document.body.scrollTop // 同时保存当前频道的滚动距离
      this.channelScrollTObj[this.channelId] = document.documentElement.scrollTop || document.body.scrollTop
    }
  },
  // 计算属性
  computed: {
    unCheckChannelList () {
      // 目标：把所有频道数组挨个取出，去用户已选频道数组中查找，如果找不到，则让filter方法收集到一个新数组里
      // const newArr = this.allChannelList.filter(bigObj => {
      //   const index = this.userChannelList.findIndex(smallObj => {
      //     return smallObj.id === bigObj.id
      //   })
      //   // 如果找到了
      //   if (index > -1) {
      //     return false
      //   } else {
      //     return true
      //   }
      // })
      // return newArr
      return this.allChannelList.filter(bigObj => this.userChannelList.findIndex(smallObj => smallObj.id === bigObj.id) === -1)
    }
  },
  activated () {
    window.addEventListener('scroll', this.scrollFn)
    // window和document来监听网页滚动的事件
    // html获取scrollTop,滚动的距离，和设置滚动的位置
    // 立刻设置滚动条的位置
    document.documentElement.scrollTop = this.$route.meta.scrollT
    document.body.scrollTop = this.$route.meta.scrollT
  },
  // 当组件被缓存时，会自动触发组件的 deactivated 生命周期函数；// 当组件被激活时，会自动触发组件的 activated 生命周期函数；
  deactivated () {
    window.removeEventListener('scroll', this.scrollFn)
  }
}
</script>

<style scoped lang="less">
/deep/ .van-nav-bar__content{
  background-color: #007bff;
}
.logo {
  width: 30px;
  height: 30px;
  padding-right: 5px !important;
}
/deep/ .van-nav-bar__left {
  color: #fff;
  font-size: 16px;
  margin-right: 3px;
}
.main {
  padding-top: 46px;
}
// 设置 tabs 容器的样式
/deep/ .van-tabs__wrap {
  padding-right: 30px;
  background-color: #fff;
}

// 设置小图标的样式
.moreChannels {
  position: fixed;
  top: 62px;
  right: 8px;
  z-index: 999;
}
.channel_popup{
  width: 100vw;
  height: 100vh;
}
// 如果想给100%，要先给html和body设置100%
// vw和vh 是css3 新出的单位，参考浏览器窗口的百分比
</style>
